<template>
  <div id="listTable">
    <el-table :data="result.rows" :height="$store.state.sizes.pTableHei" border stripe>
      <el-table-column v-for="prop in props" v-if="!prop.tableHide" :prop="prop.code" :label="prop.name"
        :min-width="prop.width" :width="prop.type ? prop.width : ''" :type="prop.type"
        :formatter="(row,column,value) => getValue(prop.dict,value)" show-overflow-tooltip />
      <el-table-column v-if="urls.update || urls.del || actions" label="操作" :width="actionWidth" fixed="right">
        <template slot-scope="scope" v-if="status != true || scope.row.status != 'R'">
          <el-button v-if="urls.update && $store.state.buttons[urls.update]" size="mini" type="primary"
            @click="modify(scope.row)">
            修改 </el-button>
          <el-button v-if="urls.del && $store.state.buttons[urls.del]" size="mini" type="danger"
            @click="delate(scope.row)">
            删除 </el-button>
          <el-button v-for="action in actions" v-if="!action.url || $store.state.buttons[action.url]" size="mini"
            :type="action.type" @click="$emit(action.emit,scope.row)">{{action.name}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop
  } from "vue-property-decorator";

  @Component
  export default class ListTable extends Vue {

    @Prop({
      type: Object
    }) urls;

    @Prop({
      type: Object
    }) result;

    @Prop({
      type: Array
    }) props;

    @Prop({
      type: Array
    }) actions;

    @Prop({
      type: Boolean
    }) status;

    actionWidth = 30;

    getValue(dictKey, value) {
      if (!dictKey) {
        return value;
      }
      const dict = this.$store.state.dict[dictKey]
      if (dict == null) {
        return value;
      }
      return dict[value] == null ? value : dict[value]
    }

    created() {
      if (this.urls.update) {
        this.actionWidth += 60;
      }
      if (this.urls.del) {
        this.actionWidth += 60;
      }
      const that = this;
      if (this.actions) {
        this.actions.forEach(i => {
          that.actionWidth += i.width;
        })
      }
    } //生命周期 - 创建完成（可以访问当前this实例）
    mounted() {} //生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} //生命周期 - 创建之前
    beforeMount() {} //生命周期 - 挂载之前
    beforeUpdate() {} //生命周期 - 更新之前
    updated() {} //生命周期 - 更新之后
    beforeDestroy() {} //生命周期 - 销毁之前
    destroyed() {} //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>

</style>
